<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta content="all" name="robots" />
<meta name="author" content="bujichong,bujichong@163.com" /> 
<meta name="Copyright" content="bujichong" />
<meta name="keywords" content="soTree,jquery,jquery plugin" />
<meta name="description" content="" /> 
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<title>基于jQuery的树结构：soTree1.0，设置简单功能完善，made by bujichong</title>
<link type="text/css" rel="stylesheet" media="all" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/soTree.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe-2.1.1.js"></script>

</head>

<body>
	<div class="wrapper">

		<h1>基于jQuery的树结构：<span class="strong">soTree1.0</span>  <a  class="a_down" href="http://code.google.com/p/sochange-juqeryplugin/downloads/list">(点击下载)</a></h1>
		<div class="allIntro">
			<h2>所有参数：</h2>
			<p class="blue">
			$(obj).soTree({ <br />
			&nbsp;&nbsp;&nbsp;&nbsp;changeTarget:null, <span class="green">//颜色选择后填入或改变的目标对象，默认null为当前引用方法对象</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;type : 'json',<span class="green">//json,stepJson,html</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;url : null,<span class="green">//当url不为空，则tree以json格式调入数据，否则tree为html格式</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;rootId:'0',<span class="green">//根节点id，只在stepJson方式中开启</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;rootText:'根节点',<span class="green">//根节点文本，只在stepJson方式中开启</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;rootHide:false,<span class="green">//根节点是否隐藏，只在stepJson方式中开启</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;rootExpand:true,<span class="green">//根节点是否默认展开，只在stepJson方式中开启</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;slide : false,<span class="green">//是否开启收缩动画</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;expand : true,<span class="green">//默认展开</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;checkbox : false,<span class="green">//默认不带选择框</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;checked : false,<span class="green">//默认不处于选择状态</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;hideId:[],<span class="green">//设置隐藏节点，以id为标识，数组的形式分开，如[10,22],表示当前id为10与22的节点被隐藏</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;onSuccess : function () {},<span class="green">//数据加载成功事件</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;onStepSuccess : function () {},<span class="green">//分步时数据加载成功事件</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;onChecked : function () {},<span class="green">//被选中事件</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;onCancelChecked : function () {},<span class="green">//取消选中事件</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;onExpand : function () {},<span class="green">//节点展开事件</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;onCollapse : function () {},<span class="green">//节点收缩事件</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;onSelect : function () {},<span class="green">//被点选事件</span><br />
			&nbsp;&nbsp;&nbsp;&nbsp;onClick : function () {}<span class="green">//点击事件（所有节点）</span><br />
			});<br />
			</p>
			<!-- <p class="p_other">未采用生僻的jquery特性，能兼容jquery1.2.6以上所有版本；<br />min版2.5k，兼容所有主流浏览器，如有发现问题或有更好的改进方案，请反馈给我，十分感谢 :)</p> -->
			<p class="p_author"><a href="http://hi.baidu.com/bujichong/" target="_blank">作者：不羁虫</a><br />2012.1.4</p>
			<p class="blue">示例代码： <br />
&nbsp;&nbsp;&nbsp;&nbsp;$('#loadTree').soTree({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:'json/tree.json',<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkbox:true,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSuccess:function (node) { <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('onSelect:' + node.text);<br />
&nbsp;&nbsp;&nbsp;&nbsp;}});</p>

			<p class="blue">事件对应node所有返回参数： <br />
&nbsp;&nbsp;&nbsp;&nbsp;{id:,<span class="green">//当前节点id</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:,<span class="green">//当前节点文本</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pid:,<span class="green">//当前节点父级id</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pText:,<span class="green">//当前节点父级文本</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isLeaf:,<span class="green">//当前节点是否为叶子节点 true/false</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isExpand:,<span class="green">//当前节点是否展开 true/false，父节点才有的属性</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isChecked:,<span class="green">//当前节点是否被选中 true/false</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;childInfo:<span class="green">//当前节点子节点信息 以数组形式显示["id^pid^text"]：["28^23^招聘办","29^23^薪资办"]，父节点才有的属性</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;}
		</div>

	

		<div class="eachBox">
			<div class="demoBox">
				<div id="tree_demo">
					<ul class="ul_tree">
						<li><span>节点1</span></li>
						<li hide="true"><span>节点2</span>
							<ul>
								<li><span>节点21</span></li>
								<li><span>节点22</span></li>
							</ul>
						</li>
						<li ischecked="true" isexpand="false"><span>节点3</span>
							<ul>
								<li><span>节点31</span>
									<ul>
										<li><span>节点311</span>
											<ul>
												<li><span>节点3111</span>
													<ul>
														<li><span>节点31111</span></li>
														<li><span>节点31112</span></li>
													</ul>
												</li>
												<li><span>节点3112</span></li>
												<li><span>节点3113</span>
													<ul>
														<li><span>节点31131</span></li>
														<li><span>节点31132</span>
															<ul>
																<li><span>节点311321</span>
																	<ul>
																		<li><span>节点3113211</span></li>
																		<li><span>节点3113212</span></li>
																	</ul>
																</li>
																<li><span>节点311322</span></li>
																<li><span>节点311323</span>
																	<ul>
																		<li><span>节点3113231</span></li>
																		<li><span>节点3113232</span></li>
																	</ul>
																</li>
															</ul>
														</li>
													</ul>
												</li>
											</ul>
										</li>
										<li><span>节点312</span></li>
									</ul>
								</li>
								<li><span>节点32</span></li>
							</ul>
						</li>
					</ul>
			<!-- <ul class="ul_tree">
						<li><em class="em_op"></em><span class="span_t">节点1</span></li>
						<li><em class="em_op"></em><span class="span_t">节点2</span>
							<ul>
								<li><em class="em_op"></em><span class="span_t">节点21</span></li>
								<li><em class="em_op"></em><span class="span_t">节点22</span>
									<ul>
										<li><em class="em_op"></em><span class="span_t">节点221</span></li>
										<li><em class="em_op"></em><span class="span_t">节点222</span></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul> -->
				</div>
			</div>
			<div class="introArea">
				<h2>1- html模式</h2>
<p>
<b>html示例代码：</b>
<pre class="blue">
&lt;div id="tree_demo"&gt;
&lt;ul&gt; 
	&lt;li&gt;&lt;span&gt;节点1&lt;/span&gt;&lt;/li&gt;
	&lt;li <span class="red">hide="true"</span>&gt;&lt;span&gt;节点2&lt;/span&gt;&lt;/li&gt;
	&lt;li <span class="red">ischecked="true" isexpand="false"</span>&gt;&lt;span&gt;节点3&lt;/span&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;span&gt;节点31&lt;/span&gt;&lt;/li&gt;
			&lt;li&gt;&lt;span&gt;节点32&lt;/span&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</p>
<p class="green">//直接在节点上添加hide属性、ischecked属性、isexpand属性<br /><br /></p>
<p class="p_code">
<b>js示例代码：</b><br />
<code>
&nbsp;&nbsp;&nbsp;&nbsp;$('#tree_demo').soTree({ <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:'html',<span class="green">//类型为 html</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkbox:true,<span class="green">//带选择框</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slide:true<span class="green">//开启收缩动画</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;});
</code></p>
			</div>

		</div>

		<div class="eachBox">
			<div class="demoBox">
				<div id="loadTree"></div>
			</div>
			<div class="introArea">
				<h2>2- json模式</h2>
<p>
<b>html示例代码：</b>
<pre class="blue">
&lt;div id="loadTree"&gt;&lt;/div&gt;
</pre>
</p>
<p class="green">//载入树的dom盒子<br /><br /></p>
<p class="p_code">
<b>js示例代码：</b><br />
<code>
&nbsp;&nbsp;&nbsp;&nbsp;$('#loadTree').soTree({<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:'json/tree.json',<span class="green">//json链接地址</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkbox:true,<span class="green">//带选择框</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hideId:[9,22],<span class="green">//隐藏的树节点id，以数组的形式将多个id串联</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onSelect:function (node) {<span class="green">//当节点被选中事件，引入参量node</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('onSelect:' + node.text);<span class="green">//alert当前节点的文本</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChecked:function (node) {<span class="green">//当前节点被勾选事件</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('onChecked:' + node.text);<span class="green">//alert当前节点的文本</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;});
</code></p><br />
<p class="p_code">
<b>json格式示例：</b><br />
<code>
[<br />
&nbsp;&nbsp;{"id":1,"pid":0,"text":"本单位"},<span class="green">//id:当前节点id,pid:父节点id,text:节点文本</span><br />
&nbsp;&nbsp;{"id":8,"pid":1,"text":"财务部",<span class="red">"ischecked":"true"</span>},<span class="green">//被checked，注：父节点被勾选，子节点也全被选择</span><br />
&nbsp;&nbsp;{"id":9,"pid":1,"text":"采购部"},<br />
&nbsp;&nbsp;{"id":11,"pid":1,"text":"市场部"},<br />
&nbsp;&nbsp;{"id":12,"pid":1,"text":"行政部",<span class="red">"hide":"true"</span>},<span class="green">//此节点隐藏</span><br />
&nbsp;&nbsp;{"id":22,"pid":1,"text":"生产部",<span class="red">"ischecked":"false","isexpand":"false"</span>}<span class="green">//不被勾选，不展开</span><br />
]<br />
</code>
</p>

			</div>
		</div>

		<div class="eachBox">
			<div class="demoBox">
					<div id="loadTree_2"></div>
			</div>
			<div class="introArea">
				<h2>3- stepJson模式</h2>
<p>
<b>html示例代码：</b>
<pre class="blue">
&lt;div id="loadTree_2"&gt;&lt;/div&gt;
</pre>
</p>



			</div>
		</div>



		<div class="eachBox">
			<div class="demoBox">
				<h3>节点操作</h3>
				<input type="text" class="txt txt_selectInfo" name="txt" /><input type="button" class="btn btn_repair" name="btn_submit" value="修改" /><input type="button" class="btn btn_add" name="btn_submit" value="添加" /><input type="button" class="btn btn_del" name="btn_submit" value="删除" /><input type="button" class="btn btn_checked" name="btn_submit" value="已选择节点" />
				<br /><br />
				<div id="loadTree_3"></div>
			</div>
			<div class="introArea">
				<h2>4- json模式,树操作</h2>
<p>
<b>html示例代码：</b>
<pre class="blue">
&lt;div id="loadTree_3"&gt;&lt;/div&gt;
</pre>
</p>
<p class="green">//载入树的dom盒子<br /><br /></p>
<p class="p_code">
<b>js示例代码：</b><br />
<code>
$('#loadTree_3').soTree({<br />
&nbsp;&nbsp;&nbsp;&nbsp;url:'json/tree.json',<span class="green">//json链接地址</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;checkbox:true,<span class="green">//带选择框</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;hideId:[9,22],<span class="green">//隐藏的树节点id，以数组的形式将多个id串联</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;onSelect:function (node) {<span class="green">//当节点被选中事件，引入参量node</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('onSelect:' + node.text);<span class="green">//alert当前节点的文本</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;},<br />
&nbsp;&nbsp;&nbsp;&nbsp;onChecked:function (node) {<span class="green">//当前节点被勾选事件</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('onChecked:' + node.text);<span class="green">//alert当前节点的文本</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
});
</code></p><br />
<p class="p_code">
<b>json格式示例：</b><br />
<code>
[<br />
&nbsp;&nbsp;{"id":1,"pid":0,"text":"本单位"},<span class="green">//id:当前节点id,pid:父节点id,text:节点文本</span><br />
&nbsp;&nbsp;{"id":8,"pid":1,"text":"财务部",<span class="red">"ischecked":"true"</span>},<span class="green">//被checked，注：父节点被勾选，子节点也全被选择</span><br />
&nbsp;&nbsp;{"id":9,"pid":1,"text":"采购部"},<br />
&nbsp;&nbsp;{"id":11,"pid":1,"text":"市场部"},<br />
&nbsp;&nbsp;{"id":12,"pid":1,"text":"行政部",<span class="red">"hide":"true"</span>},<span class="green">//此节点隐藏</span><br />
&nbsp;&nbsp;{"id":22,"pid":1,"text":"生产部",<span class="red">"ischecked":"false","isexpand":"false"</span>}<span class="green">//不被勾选，不展开</span><br />
]<br />
</code>
</p>

			</div>
		</div>


		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

	</div>

<script type="text/javascript">

$('#tree_demo').soTree({type:'html',checkbox:true,expand:true,slide:true});

$('#loadTree').soTree({
	url:'json/tree.json',
	checkbox:true,
	hideId:[9,22],
	onSelect:function (node) {
		alert('onSelect:' + node.text);
		//console.log('onSelect:' + node.text);
	},
	onChecked:function (node) {
		alert('onChecked:' + node.text);
		//console.log('onChecked:' + node.text);
	}
});

$('#loadTree_2').soTree({type:'stepJson',url:'json/tree_one.json',checkbox:true,slide:true});

var selcetId;
$('#loadTree_3').soTree({
	url:'json/tree_3.json',
	checkbox:true,
	onSelect:function (node) {
		selcetId = node.id;
		//alert('onSelect:' + node.text);
	}
//	onChecked:function (node) {
//		alert('onChecked:' + node.text);
//	}
});


$('.btn_repair').click(function () {
	if (selcetId) {
		if ($('.txt_selectInfo').val()) {
			var info = $('.txt_selectInfo').val();
			$('>.span_t','#'+selcetId).text(info);
		}else {
			alert('没有填写相关信息！');
		}
		//selcetId = null;
	}else {
		alert('没有选择节点！');
	}
});

var newTreeNode = {"id":279,"text":"测试"};
$('.btn_add').click(function () {
	if (selcetId) {
		var $thisN = $('#'+selcetId);
		$thisN.addClass('li_par');
		$('>.em_op',$thisN).addClass('em_par');
		$('>.span_t',$thisN).addClass('span_par');
		var dis = '',chked='';
		if ($('>.b_chk',$thisN).css('display')=='inline') {dis = ' style="display:inline;"'}
		if ($('>.b_chk',$thisN).hasClass('b_checked')) {chked=' b_checked';}
		if ($thisN.find('>ul').length) {
			$thisN.find('>ul').append('<li id="'+newTreeNode.id+'" pid="'+selcetId+'"><em class="em_op"></em><b class="b_chk'+chked+'"'+dis+'></b><span class="span_t">'+newTreeNode.text+'</span></li>');
		}else {
			$thisN.append('<ul><li id="'+newTreeNode.id+'" pid="'+selcetId+'"><em class="em_op"></em><b class="b_chk'+chked+'"'+dis+'></b><span class="span_t">'+newTreeNode.text+'</span></li></ul>');
		}
	}else {
		alert('没有选择节点！');
	}
});

$('.btn_del').click(function () {
	if (selcetId) {
		$('#'+selcetId).remove();
	}else {
		alert('没有选择节点！');
	}
});

//var manage = $('#loadTree_3').soTreeManage();
$('.btn_checked').click(function () {
	var nodeD = [];
	$('.b_checked',manage).each(function () {
		nodeD.push($(this));
	});
	 var text = "";
	$.each(nodeD,function () {
		text += $(this).next('.span_t').text()+",";
	});
	alert(text);
});

</script>

</body>
</html>